<template>
  <view class="container">
    <view class="login-form">
      <view class="title">登录</view>
      <view class="input-group">
        <input type="text" class="input" placeholder="用户名" v-model="userphone" />
      </view>
      <view class="input-group">
        <input type="password" class="input" placeholder="密码" v-model="password" />
      </view>
      <button class="login-btn" @click="handleLogin">登录</button>
	  <button class="register-btn" @click="handleRegister">注册</button>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      userphone: '',
      password: '',
	   token: '' 
    }; 
  },
  methods: {
    handleLogin() {
      // 检查用户名和密码是否为空
      if (this.userphone === '' || this.password === '') {
        uni.showToast({
          title: '用户名或密码不能为空',
          icon: 'none'
        });
        return;
      }

      // 构造请求数据
      const loginData = {
        userphone: this.userphone,
        password: this.password
      };

      // 发送请求到后端进行验证
      uni.request({
        url: 'http://106.15.182.86:9099/api/login', 
        method: 'POST',
        data: loginData,
        header: {
          
		   // 'User-Agent': 'Mozilla/5.0 (Linux; Android 9; PCLM10 Build/PQ3B.190801.001010846; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/91.0.4472.114 Safari/537.36 uni-app Html5Plus/1.0 (Immersed/24.0)',
		   'Content-Type': 'application/json',
		   'Host': '106.15.182.86:9099',
		   'Connection': 'Keep-Alive',
		   'Accept-Encoding': 'gzip'
        },
        success: (res) => {
               console.log('Response:', res); // 打印整个响应对象以便检查
               console.log('Before reLaunch');
               if (res.data && res.data.code === 200) {
				   /* res.data && res.data.code === 200 && res.data.data && res.data.data.token*/
				   
                 // 登录成功逻辑
				  const token = res.data.token; // 假设token在res.data.data.token中
				  uni.setStorageSync('token', token); // 将token保存到本地存储
				  console.log(token);
                 uni.reLaunch({
                   url: '/pages/index/index' 
                 });
               } else {
                 // 登录失败逻辑
                 console.log('Login failed:', res.data.message);
                 uni.showToast({
                   title: res.data.message || '登录失败，请检查您的用户名和密码',
                   icon: 'none'
                 });
               }
             },
             fail: (err) => {
               console.error('Login request failed:', err);
               uni.showToast({
                 title: '网络请求失败，请稍后再试',
                 icon: 'none'
               });
             }
           });
    },
	handleRegister() {
		uni.navigateTo({
			url: '/pages/regist/regist'
			})
  }
}
} 
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8f8f8;
}

.login-form {
  width: 80%;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
}

.input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
}

.login-btn {
  width: 100%;
  height: 40px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>
